<template>
  <div class="header">
    <div class="header-left">
      <h3 tabindex="0" id="siteName" title="攀枝花学院网络教学平台">
        攀枝花学院网络教学平台
      </h3>
    </div>
    <div class="header-right">
      <el-col>
        <el-dropdown trigger="click" @command="handleCommand">
          <div>
            <span class="demonstration">
              <!-- 动态绑定头像 -->
              <el-image :src="avatarUrl" fit="cover" v-if="avatarUrl"></el-image>
            </span>
            <span class="el-dropdown-link">
              <!-- 动态绑定教师名称 -->
              {{ teacherName }} <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="toMyCourse">我的课程</el-dropdown-item>
            <el-dropdown-item command="toMyAccount">账号管理</el-dropdown-item>
            <el-dropdown-item command="toLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </div>
  </div>
</template>

<script>
import { removeToken } from "@/utils/localStorage";
import axios from "@/utils/request";
import {joinUserAvatarPath} from "@/utils/joinUserAvatarPath";
import socketService from "@/utils/socketService";
export default {
  data() {
    return {
      teacherId: localStorage.getItem('teacherId'),  // 获取教师 ID
      avatarUrl: '', // 用于存储教师头像 URL
      teacherName: '', // 用于存储教师名称
    };
  },
  methods: {
    joinUserAvatarPath,
    handleCommand(command) {
      if (command === "toLogin") {
        this.toLogin();
      }
      if (command === "toMyCourse") {
        this.toMyCourse();
      }
      if (command === "toMyAccount") {
        this.toMyAccount();
      }
    },
    toLogin() {
      removeToken();
      localStorage.removeItem('teacherId'); // 清除教师 ID ，退出登录提示
      // 断开连接
      socketService.disconnect();
      this.$message({
        message: '退出登录成功',
        center: true,
        type: 'success',
        duration: '1500',
        offset: '80',
      });
      this.$router.push('/adminLogin');
    },
    toMyCourse() {
      this.$router.push('/studentPage/myCourses').catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          throw err; // 处理除 NavigationDuplicated 以外的错误
        }
      });
    },
    toMyAccount() {
      this.$router.push('/studentPage/myAccount').catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          throw err; // 处理除 NavigationDuplicated 以外的错误
        }
      });
    },
    // 获取教师信息（头像和姓名）
    async getTeacherInfo(teacherId) {
      try {
        const response = await axios.get(`http://localhost:3000/getTeacherAvatarUrl/${teacherId}`);
        const { avatar_url, teacherName } = response.data; // 从返回结果中提取头像 URL 和教师名称

        this.avatarUrl = this.joinUserAvatarPath(avatar_url); // 更新头像 URL
        this.teacherName = teacherName; // 更新教师名称
      } catch (error) {
        console.error("获取教师信息失败:", error);
      }
    },
  },
  created() {
    this.getTeacherInfo(this.teacherId);  // 获取教师信息
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 80px;
  background: #FFFFFF;
  box-shadow: 0px 2px 6px 0px rgba(43, 51, 59, 0.06);
  color: #2B333B;
  position: fixed;
  top: 0;
  right: 0;
  left: 10px;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
}
.header-left {
  width: 220px;
  float: left;
  height: 80px;
  display: flex;
  align-items: center;
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  max-width: 60%;
}
.header-right {
  height: 80px;
  width: 220px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，可选 */
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  position: relative;
  top: 10px;

}

.demonstration .el-image{
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
</style>
